<template>
  <div class="app-container">
    <el-form :model="queryForm" ref="queryForm" size="small" v-show="showSearch" label-width="68px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="状态" prop="recordType">
            <el-select
              v-model="queryForm.recordType"
              placeholder="记录状态"
              clearable
              style="width: 240px"
            >
           <el-option
              v-for="dict in recordTypes"
              :key="dict.code"
              :label="dict.codeName"
              :value="dict.code"
            />
          </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="用户名称" prop="recordType">
           <el-input
                    v-model="queryForm.userName"
                    placeholder="请输入用户名称"
                    clearable
                  />
          </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单号" prop="recordType">
             <el-input
                      v-model="queryForm.recordId"
                      placeholder="请输入订单号"
                      clearable
                    />
            </el-form-item>
            </el-col>
          </el-row>
          <el-row>
          <el-col :span="8">
              <el-form-item label="归属部门" prop="deptId">
                <treeselect v-model="queryForm.deptId" :options="deptOptions"  placeholder="请选择归属部门" style="width:80%" />
              </el-form-item>
          </el-col>
          <el-col :span="9">
              <el-form-item label="创建时间" prop="deptId">
                 <el-date-picker
                      v-model="dataScope"
                      type="daterange"
                      align="right"
                      unlink-panels
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="yyyy-MM-dd"
                      format="yyyy-MM-dd"
                      :default-time="['00:00:00', '23:59:59']"
                      :picker-options="pickerOptions">
                    </el-date-picker>
              </el-form-item>
          </el-col>
        <el-col :span="6">
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>

                <el-button type="primary"  size="mini" @click="downloadExcel">导出</el-button>
              </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table v-loading="loading" :data="tableList" border :summary-method="getTotalRecord" show-summary>
      <el-table-column prop="id" label="订单号" width="250">
        <template slot-scope="scope">
          <span class="sp_price">订单号:{{scope.row.id}}</span>
          <span class="sp_price">创建时间:{{scope.row.createDate}}</span>
          <span class="sp_price">流水号:{{scope.row.cardRemark}}</span>
        </template>
      </el-table-column>
       <el-table-column prop="createUserName" label="技师名称" width="90"></el-table-column>
      <el-table-column label="状态" align="center" key="dataStts">
        <template slot-scope="scope">
           <span v-if="scope.row.recordType==1">待核查</span>
           <span v-if="scope.row.recordType==2">待发工资</span>
           <span v-if="scope.row.recordType==3">已发工资</span>
        </template>
      </el-table-column>
      <el-table-column prop="totalDiscountAmount" label="项目信息" width="160">
        <template slot-scope="scope">
          <span class="sp_price">项目金额:<a href="#" @click="showProjectDialog(scope.row)" style="color: blue;">{{scope.row.totalAmount}}</a></span>
          <span class="sp_price">技师分成比:{{scope.row.technicianRate}}%</span>
          <span class="sp_price">优惠总额:{{scope.row.discountAmount}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="totalInputAmount" label="收费总信息" width="150">
        <template slot-scope="scope">
          <span class="sp_price" style="color: red;" v-if="scope.row.totalCashAmount >0">现金:{{scope.row.totalCashAmount}}</span>
          <span class="sp_price" v-if="scope.row.totalCashAmount ==0">现金:{{scope.row.totalCashAmount}}</span>
          <span class="sp_price">电子:{{scope.row.tipsCardAmount+scope.row.totalCardAmount}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="totalTechAmount" label="技师分成" width="150">
        <template slot-scope="scope">
          <span class="sp_price" style="color: red;" v-if="scope.row.techCashAmount >0">现金:{{scope.row.techCashAmount}}</span>
          <span class="sp_price" v-if="scope.row.totalCashAmount ==0">现金:{{scope.row.techCashAmount}}</span>
          <span class="sp_price">电子:{{scope.row.techCardAmount}}</span>
           <span class="sp_price">小费:{{scope.row.tipsCardAmount}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="totalCompanyAmount" label="公司分成" width="150">
        <template slot-scope="scope">

          <span class="sp_price" style="color: red;" v-if="scope.row.totalCashAmount >0">现金:{{scope.row.companyCashAmount}}</span>
          <span class="sp_price" v-if="scope.row.totalCashAmount ==0">现金:{{scope.row.companyCashAmount}}</span>
          <span class="sp_price">电子:{{scope.row.companyCardAmount}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="recordRemark" label="备注"></el-table-column>
      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-show="scope.row.recordType==1"
            @click="handCheck(scope.row)"
            v-hasPermi="['system:dept:edit']"
          >核查</el-button>

        </template>
      </el-table-column>
    </el-table>
    <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryForm.pageNum"
          :limit.sync="queryForm.pageSize"
          @pagination="findPage"
        />

        <!-- 添加或修改部门对话框 -->
          <el-dialog title="查看项目" :visible.sync="open" width="600px" append-to-body>
            <el-table v-loading="loading" :data="configList">
              <el-table-column prop="categoryName" label="分类名称" width="200"></el-table-column>
              <el-table-column prop="configName" label="项目名称" width="200"></el-table-column>
              <el-table-column prop="configAmount" label="项目金额"></el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
              <el-button @click="closeDialog">取 消</el-button>
            </div>
          </el-dialog>
  </div>
</template>

<script>
import { findPage, saveConfig, modifyConfig, delConfig,modifyStts } from "@/api/project/config";
import { findTree } from "@/api/project/category";
import { findRecordPage,checkRecord,exportExcel } from "@/api/project/record";
import {  deptTreeSelect } from "@/api/system/user";
import DataStts from '@/enums/DataStts'
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Treeselect from "@riophae/vue-treeselect";
export default {
  name: "record",
   components: { Treeselect },
  data() {
    return {
      recordTypes:[
        {"code":-1,"codeName":"全部"},
        {"code":1,"codeName":"待核查"},
        {"code":2,"codeName":"待发工资"},
        {"code":3,"codeName":"已发工资"}
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      dataScope:[],
      queryForm:{
        pageNum:1,
        pageSize:10,
        recordType:-1,
      },
      // 部门树选项
      deptOptions: [],
      // 遮罩层
      loading: true,
      open:false,
      configList:[],
      // 显示搜索条件
      showSearch: true,
      total: 0,
      lastRecord:{},
      tableList:[],
      // 是否展开，默认全部展开
      isExpandAll: true,
      // 重新渲染表格状态
      refreshTable: true,

    };
  },
  created() {
    this.findPage();
    this.getDeptTree();
  },
  methods: {
    findPage(){
      this.queryForm.statTime = null;
      this.queryForm.endTime = null;
      if(this.dataScope != null && this.dataScope.length >0){
        this.queryForm.statTime = this.dataScope[0] +" 00:00:00";
        this.queryForm.endTime = this.dataScope[1] +" 23:59:59";
      }
      this.lastRecord ={};
       this.tableList = [];
      findRecordPage(this.queryForm).then(res=>{
         this.loading = false;
        if(null != res && res.data != null){
          let len = res.data.length;
          this.lastRecord = res.data[len-1];
          this.tableList = res.data;
          this.tableList.splice(len-1,1);

        }
        this.total = res.total;

      })
    },
    getTotalRecord(param){
      let totalArr =[];
      if(null != this.lastRecord && this.lastRecord.companyCardAmount >=0 && this.lastRecord.companyCashAmount>=0){
        totalArr[0] ="总计";
        totalArr[3] = <p style="display: inline-block; margin-block-start: 0px;margin-block-end: 0px;">
            <div>项目总金额:{this.lastRecord.totalAmount}</div>
            <div>优惠总额:{this.lastRecord.discountAmount}</div>
          </p>
        totalArr[4] = <p style="display: inline-block; margin-block-start: 0px;margin-block-end: 0px;">
            <div style="color:red">现金总金额:{this.lastRecord.totalCashAmount}</div>
            <div>电子总金额:{this.lastRecord.totalCardAmount.toFixed(2)}</div>

          </p>
        totalArr[5] =<p style="display: inline-block; margin-block-start: 0px;margin-block-end: 0px;">
            <div style="color:red">现金总金额:{this.lastRecord.techCashAmount}</div>
            <div> 电子总金额:{this.lastRecord.techCardAmount}</div>
            <div>小费总金额:{this.lastRecord.tipsCardAmount}</div>
            <div>总计总金额:{(this.lastRecord.tipsCardAmount+this.lastRecord.techCashAmount+this.lastRecord.techCardAmount).toFixed(2)}</div>
          </p>
        totalArr[6] = <p style="display: inline-block; margin-block-start: 0px;margin-block-end: 0px;">
            <div style="color:red">现金总金额:{this.lastRecord.companyCashAmount}</div>
            <div>电子总金额:{this.lastRecord.companyCardAmount}</div>
            <div>总计金额:{(this.lastRecord.companyCardAmount+this.lastRecord.companyCashAmount).toFixed(2)}</div>
            </p>
      }
      return totalArr;
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then(res => {
        this.deptOptions = res;
      });
    },
    handleQuery(){
        this.queryForm.pageNum = 1;
        this.findPage();
    },
    resetQuery(){
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleStatusChange(row){
      let text = row.dataStts === 1 ? "启用" : "停用";
      this.$modal.confirm('确认要"' + text + '""' + row.projectName + '"项目吗？').then(function() {
         const req ={id:row.id,dataStts:row.dataStts==1?1:2};
         modifyStts(req);
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(function() {
        row.status = row.status === "0" ? "1" : "0";
      });
    },
    handCheck(row){
      let _this = this;
      this.$modal.confirm("确定要核查吗?").then(res=>{
        checkRecord({"recordId":row.id}).then(res=>{
           _this.$modal.msgSuccess("核查成功");
           _this.findPage();
        })
      })
    },
    showProjectDialog(row){
      this.open = true,
      this.configList = row.projectList;
    },
    closeDialog(){
      this.open = false;
      this.configList =[];
    },
    downloadExcel(){
      this.queryForm.statTime = null;
      this.queryForm.endTime = null;
      if(this.dataScope != null && this.dataScope.length >0){
        this.queryForm.statTime = this.dataScope[0] +" 00:00:00";
        this.queryForm.endTime = this.dataScope[1] +" 23:59:59";
      }
      exportExcel(this.queryForm).then(res =>{
          var currDate = new Date();
         const link = document.createElement('a')
              const url = window.URL.createObjectURL(new Blob([res],{ type: 'application/vnd.ms-excel' }))
              link.setAttribute("href",url);
              link.setAttribute('download','项目记录.xlsx')
              link.click()
      })
    }
  }
};
</script>
<style>
  .sp_price{
    display: block;
  }
</style>
